<template>
  <view class="container">
    <scroll-view scroll-y="true" style="width: 100%; height: 98vh">
      <image class="bgc" src="../../static/img/invitebgc.png" mode="aspectFill"></image>
      <!-- 头部标题 -->
      <view class="title" :style="[top]">
        <uni-icons type="left" size="20" color="#fff" style="margin-left: 20rpx" @click="back"></uni-icons>
        <view style="flex: 1; text-align: center; padding-right: 60rpx">邀请码</view>
      </view>
      <view style="position: absolute; color: #fff; top: 180rpx; right: 26rpx; z-index: 99" @click="gosharepage">分享</view>
      <!-- 邀请的字体 -->
      <!-- <image src="../../static/img/invitetitle.png" mode="aspectFill" class="fontstyle"></image> -->
      <view class="fontstyle" style="font-size: 80rpx; color: #fff; letter-spacing: 11rpx; text-align: center; font-family: Slideqiuhong, Slideqiuhong; font-weight: 400">
        邀请好友注册 送{{ info.num }}张优惠券
      </view>
      <!-- 邀请码 -->
      <view class="box">
        <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 36rpx; color: #333333">邀请码</view>
        <view style="display: flex; margin-top: 30rpx">
          <view style="box-sizing: border-box; width: 430rpx; height: 92rpx; background: #f1f1f1; text-align: center; line-height: 92rpx; letter-spacing: 30rpx">
            {{ info.invitation_code }}
          </view>
          <view
            style="
              box-sizing: border-box;
              width: 160rpx;
              height: 92rpx;
              background: #000000;
              text-align: center;
              line-height: 92rpx;
              font-weight: bold;
              font-size: 30rpx;
              color: #ffffff;
            "
            @click="copy"
          >
            复制
          </view>
        </view>
        <view class="peoplenum">
          <view class="item">
            <view class="num">{{ info.count }}人</view>
            <view class="txt">已邀请好友</view>
          </view>
          <view class="item">
            <view class="num">{{ info.coupon_num }}张</view>
            <view class="txt">已获得优惠券</view>
          </view>
        </view>
      </view>
      <!-- 邀请按钮 -->
      <button class="invite" open-type="share">立即邀请</button>
      <!-- 规则说明 -->
      <view class="tiptitle">规则说明</view>
      <view class="tiptxt">
        <rich-text :nodes="info.specification"></rich-text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  onShareAppMessage(res) {
    return {
      title: '考神临门',
      path: '/parents/invitecode/invitecode'
    };
  },
  data() {
    return {
      num: '', // 优惠卷的数量
      isiphone: false,
      top: {
        paddingTop: '50rpx'
      },
      info: {} // 邀请码的信息
    };
  },
  methods: {
    // 生成邀请码
    async getcode() {
      const res = await uni.$http.post('/Invitation/index');
      console.log('生成邀请码', res);
      this.info = res.data.data;
      console.log(this.info);
    },
    // 立即邀请
    invite() {
      console.log('邀请');
    },
    // 复制
    copy() {
      uni.setClipboardData({
        data: this.info.invitation_code,
        success: () => {
          console.log('复制成功');
        }
      });
    },
    back() {
      console.log('返回');
      uni.navigateBack();
    },
    gosharepage() {
      uni.navigateTo({
        url: '/parents/sharepage/sharepage'
      });
    }
  },
  onLoad() {
    // 生成邀请码
    this.getcode();
    const app = getApp();
    this.isiphone = app.$vm.isIPhone;
    if (this.isiphone) {
      this.top.paddingTop = app.$vm.liuhai + 50 + 'rpx';
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .bgc {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // height: 100vh;
    z-index: 1;
  }
  .title {
    box-sizing: border-box;
    position: absolute;
    display: flex;
    align-items: center;
    width: 100%;
    top: 0rpx;
    left: 0rpx;
    z-index: 99;
    color: #fff;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #ffffff;
  }
  .fontstyle {
    box-sizing: border-box;
    position: absolute;
    width: 568rpx;
    height: 224rpx;
    top: 214rpx;
    left: 92rpx;
    z-index: 9;
  }
  .box {
    position: absolute;
    z-index: 9;
    box-sizing: border-box;
    width: 670rpx;
    height: 394rpx;
    left: 40rpx;
    top: 500rpx;
    padding: 40rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 30rpx 30rpx;
  }
  .peoplenum {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 40rpx;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .num {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #3553e8;
        margin-bottom: 18rpx;
      }
      .txt {
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
      }
    }
  }
  .invite {
    position: absolute;
    box-sizing: border-box;
    width: 670rpx;
    height: 100rpx;
    top: 934rpx;
    left: 40rpx;
    text-align: center;
    line-height: 100rpx;
    border-radius: 100rpx;
    z-index: 9;
    color: #fff;
    background: linear-gradient(#889cfc, #274bff);
  }
  .tiptitle {
    position: absolute;
    top: 1074rpx;
    left: 40rpx;
    font-weight: bold;
    font-size: 28rpx;
    color: #ffffff;
    z-index: 9;
  }
  .tiptxt {
    position: absolute;
    top: 1144rpx;
    left: 40rpx;
    font-weight: 500;
    font-size: 26rpx;
    line-height: 60rpx;
    color: #ffffff;
    z-index: 9;
  }
}
</style>
